<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>WebSocket管理</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../../css/bootstrap.min14ed.css" rel="stylesheet">
    <link href="../../css/font-awesome.min93e3.css" rel="stylesheet">
    <link href="../../css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../../css/animate.min.css" rel="stylesheet">
    <link href="../../css/style.min862f.css" rel="stylesheet">
    <!-- 全局js -->
    <!-- 全局js -->
    <script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
    <script src="../static/js/plugins/metisMenu/jquery.metisMenu.js" th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
    <script src="../static/js/plugins/slimscroll/jquery.slimscroll.min.js" th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
    <!-- 自定义js -->
    <script src="/js/app.js?v=4.1.0"></script>
    <script type="text/javascript" src="/js/contabs.js"></script>
    <!-- 第三方插件 -->
    <script src="/js/plugins/pace/pace.min.js"></script>
    <!-- vue -->
    <script type="text/javascript"
            src="/js/vue.min.js">

    </script>
    <script src="/js/appjs/oa/webSocket/sockjs.min.js"></script>
    <script src="/js/appjs/oa/webSocket/stomp.min.js"></script>
    <!-- Toastr script -->
    <script src="/js/plugins/toastr/toastr.min.js"></script>
</head>
<body  onload="connect()">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-7">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>系统通知 <small>一切为了更好的用户体验</small></h5>
                </div>
                <div class="ibox-content">
                    <div class="row">
                            <form role="form">
                                <div class="form-group">
                                    <label>&nbsp;&nbsp;&nbsp;&nbsp;发送内容：</label>
                                    <textarea type="test" id="names" placeholder="请输入您要发送的内容！" class="form-control"></textarea>
                                </div>
                                <div>
                                    <a class="btn btn-sm btn-primary pull-right m-t-n-xs" onclick="sendName()"><strong>发   送</strong></a>
                                </div>
                            </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="application/javascript">
    function sendName() {
        var name =document.getElementById("names").value;
        stompClient.send("/welcome", {}, JSON.stringify({ 'name': name }));//通过stompClient.send（）向地址为"/welcome"的服务器地址发起请求，与@MessageMapping里的地址对应。
    }
    function connect() {
        var socket = new SockJS('/endpointWisely'); //连接SockJS的endpoint是“endpointWisely”，与后台代码中注册的endpoint要一样。
        stompClient = Stomp.over(socket);//创建STOMP协议的webSocket客户端。
        stompClient.connect({}, function(frame) {//连接webSocket的服务端。
            stompClient.subscribe('/topic/getResponse', function(respnose){ //通过stompClient.subscribe（）订阅服务器的目标是'/topic/getResponse'发送过来的地址，与@SendTo中的地址对应。
            });
        });
    }

</script>
</body>
</html>